<template>
    <div style="text-align: center">
        <van-nav-bar fixed="true" title="修改信息" left-text="返回" @click-left="onClickLeft" left-arrow>
        </van-nav-bar>

        <van-cell-group style="margin-top: 46px">
            <div>
                <span>选择新用户头像</span>
            </div>
            <van-radio-group v-model="radio" direction="horizontal" style="justify-content: center">
                <van-radio name="../../static/images/nan.png" icon-size="24px"><img src="../../static/images/nan.png" width="50" height="50" style="border-radius: 50%">
                </van-radio>
                <van-radio name="../../static/images/nv.png" icon-size="24px"><img src="../../static/images/nv.png" width="50" height="50" style="border-radius: 50%">
                </van-radio>
            </van-radio-group>
            <van-field
                    v-model="username"
                    required
                    label="姓名"
                    placeholder="请修改姓名"
            />
            <van-field
                    v-model="usersex"
                    required
                    label="性别"
                    placeholder="请修改性别"
            />
            <van-field
                    v-model="userage"
                    required
                    label="年龄"
                    placeholder="请修改年龄"
            />
            <van-field
                    v-model="number"
                    required
                    label="账号"
                    placeholder="请修改账号"
            />
            <van-field
                    v-model="pwd"
                    required
                    label="密码"
                    placeholder="请修改密码"
            />
        </van-cell-group>
        <van-button @click="update" style="margin-top: 10px" size="small"
                    color="linear-gradient(to right, #4bb0ff, #6149f6)" round type="info">提交修改
        </van-button>

    </div>
</template>

<script>
    export default {
        name: "userChangeMessage",
        data() {
            return {
                radio: '',
                username: '',
                usersex: '',
                userage: '',
                number: '',
                pwd: ''
            }
        },
        methods: {
            onClickLeft() {
                this.$router.push({path: 'userMessage'})
            },
            update() {
                console.log(this.username)
                console.log(this.usersex)
                console.log(this.userage)
                console.log(this.number)
                console.log(this.pwd)
                console.log(this.radio)
                let user = JSON.parse(localStorage.getItem('token') || '{}');
                if (!this.number) {
                    this.$toast.fail('必须填写账号!')
                } else if (!this.pwd) {
                    this.$toast.fail('必须填写密码！')
                }else {
                    this.$axios.post('/user/updateUser', {
                            "lawUserName": this.username,
                            "lawUserSex": this.usersex,
                            "lawUserAge": this.userage,
                            "lawUserNumber": this.number,
                            "lawUserPwd": this.pwd,
                            "lawUserImage": this.radio,
                            "id": user.id
                        },
                        res => {
                            console.log(res)
                            if (res.data.success) {
                                this.$axios.post('/user/showUser',{id:user.id},
                                    res =>{
                                        if (res.data.success){
                                            localStorage.setItem('token', JSON.stringify(res.data.data))
                                        }
                                    })
                                this.$router.push('/userCenter')
                                this.$toast.success('修改成功！')
                            } else {
                                this.$toast(res.data.message)
                            }
                        })
                }
            }
        },

    }
</script>


<style scoped>

</style>
